<template>
  <div>
    <h1>Home</h1>
   <button @click="toDetail1">娱乐新闻</button>
   <button @click="toDetail2">体育新闻</button>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "News",
});
</script>

<script setup lang="ts">
import { useRouter } from "vue-router";
/*
  useRouter
    返回router 实例 相当于在模板中使用 $router.必须在setup()中调用 
 */
const router = useRouter();
const toDetail1 =()=>{
  router.push("/home/news/datail");
}
const toDetail2 =()=>{
  router.push({
    name:"Detail"
  })
}
</script>

<style scoped lang="scss"></style>
